<template>
  <div class="usersList">
    <el-card class="box-Card">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="用户名称" class="input">
          <el-input v-model="formInline.user" />
        </el-form-item>
        <el-form-item label="用户邮箱" class="input">
          <el-input v-model="formInline.name" />
        </el-form-item>
        <el-form-item label="角色" class="input">
          <el-select v-model="formInline.region">
            <el-option label="超级管理员" value="shanghai" />
            <el-option label="管理员" value="beijing" />
            <el-option label="老师" value="beijing" />
            <el-option label="学生" value="beijing" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">搜索</el-button>
          <el-button plain>清除</el-button>
          <el-button type="primary" @click="addClick">+新增用户</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card>
      <el-table :data="list" style="width: 100%">
        <el-table-column label="序号" type="index" width="80px" />
        <el-table-column prop="username" label="用户名" />
        <el-table-column prop="phone" label="电话" />
        <el-table-column prop="email" label="邮箱" />
        <el-table-column prop="role" label="角色" />
        <el-table-column prop="remark" label="备注" />
        <el-table-column prop="status" label="状态" />
        <el-table-column fixed="right" label="操作">
          <template>
            <el-button
              type="text"
              size="small"
              @click="editEvent"
            >编辑</el-button>
            <el-button type="text" size="small">启用</el-button>
            <el-button type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: center">
        <el-pagination
          :current-page.sync="page.page"
          :page-sizes="[1, 5, 10, 30, 40]"
          :page-size.sync="page.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getData"
          @current-change="getData"
        />
      </div>
      <!-- 新增弹框组件 -->
      <Add ref="add" />
      <!-- 编辑弹框组件 -->
      <Edit ref="edit" />
    </el-card>
  </div>
</template>
<script>
import { userList } from '@/api/userList'
import Add from './components/add'
import Edit from './components/edit.vue'
export default {
  name: 'UsersList',
  components: {
    Add,
    Edit
  },
  data() {
    return {
      formInline: {
        user: '',
        region: ''
      },
      list: [],
      total: 10,
      page: {
        page: 1,
        limit: 10
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    async getData() {
      const res = await userList(this.page)
      this.total = res.data.total
      this.list = res.data.items
      console.log('用户信息', res)
    },
    // 新增按钮
    addClick() {
      console.log('addClick')
      this.$refs.add.show = true
    },
    // 编辑按钮
    editEvent() {
      this.$refs.edit.show = true
    }
  }
}
</script>
<style lang="scss" scoped>
.usersList {
  padding: 15px;
  .box-Card {
    margin-bottom: 10px;
  }
}
</style>
